    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .active{
                border-radius: 50%;
            }
            div{
                margin: 10px auto;
                color: black;
                height: 100px;
                width: 300px;
                border: 1px solid #f52f4c;
                text-align: center;
                /*line-height: 100px;*/
                font:30px/100px "Microsoft YaHei"

            }
        </style>
    </head>
    <body>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <script>
            // console.log(document.querySelectorAll('div')[2])
           document.querySelectorAll('div')[2].onclick=function () {
              document.querySelector('.box3').classList.toggle('active');
               // document.querySelector('.box3').classList.add('active');

               console.log(document.querySelectorAll('div')[2])
           }
        </script>
    </body>
    </html>